import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcssPresetEnv from 'postcss-preset-env'
import Components from 'unplugin-vue-components/vite'
import NutUIResolver from '@nutui/nutui/dist/resolver'

// @ts-ignore
import postCssPxToRem from 'postcss-pxtorem'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 开启 unplugin 插件，自动引入 NutUI 组件
    Components({
      resolvers: [NutUIResolver()],
    }),
    viteMockServe({
      mockPath: './mock',
      enable: true,
      watchFiles: false
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./', import.meta.url))
    }
  },
  css: {
    // 配置全局样式变量
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    },
    postcss: {
      plugins: [
        postcssPresetEnv(/* pluginOptions */),
        postCssPxToRem({
          rootValue: 36, // 1rem的大小, 根据设计稿宽度/10进行配置
          // propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: [],
          mediaQuery: false,
          exclude: /node_modules/i,
        })
      ]
    }
  }
})
